<template>
    <Rheaders />
    <div class="page">
        <div class="top">
            <P>商品列表</P>
            <div class="txt">充值立即到账，如有疑问请联系客服。</div>
        </div>
        <div class="card" v-for="items, index in pres" :key="index">
            <div>
                <p class="txt1">{{ items.txt1 }}</p>
                <p>{{ items.txt2 }}</p>
                <div class="cardline">
                    <p class="txt2">提供优质服务</p>
                    <div class="line"></div>
                </div>
                <div v-for="item, index in pre" :key="index" class="tip">
                    <img class="tick" src="../../public/assets/对号.png">
                    <p class="txt3">{{ item }}</p>
                </div>
            </div>
            <div class="paycard">
                <p class="txt4">支持支付宝、微信</p>
                <p class=" txt5">{{ items.txt3 }}</p>
                <router-link to="/pay">
                <div class="button">立即购买</div></router-link>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import Rheaders from "./home/Rheaders.vue"

export default {
    name: "shop",
    data() {
        return {
            pre: [
                "全平台畅快浏览",
                "快速客服响应",
                "全平台客户端",
                "即开即用",
            ],
            pres: [
                { txt1: '2小时体验版', txt2: '2小时对话时长，用完截至', txt3: '¥ 9.99' },
                { txt1: '24小时体验版', txt2: '24小时对话时长，用完截至', txt3: '¥ 28.88' },
                { txt1: '周套餐', txt2: '7天对话时长，用完截至', txt3: '¥ 88.88' },
                { txt1: '月套餐', txt2: '30天对话时长，用完截至', txt3: '¥ 188.8' },
                { txt1: '季度套餐', txt2: '90天对话时长，用完截至', txt3: '¥ 288.8' },
            ],
        }
    },
    props: {
    },
    computed: {
    },
    methods: {
    },
    mounted() {
    },
    components: {
        Rheaders
    }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 90px 2rem 0;

}

.top {
    margin-top: 18px;
    width: 100%;
    align-items: flex-start;
    font-weight: bold;
    font-size: 30px;
    color: #ffffff;


    .txt {
        margin: 21px 0 0;
        font-size: 14px;
        color: #7c91a3;
        font-weight: 400;
    }
}

@media screen and (min-width:660px) {
    .top {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}


.card {
    width: 107%;

    margin: 3rem 1rem 1rem;
    padding: 2.3rem;
    border: 1px solid #ffffff;
    border-radius: 15px;
    background: radial-gradient(164.75% 100% at 50% 0%, #334155 0%, #0F172A 48.73%);
    font-size: 16px;
    color: #7c91a3;
    font-weight: 400;

    .txt1 {
        font-weight: bold;
        font-size: 30px;
        color: #ffffff;
        margin-bottom: 2rem;
    }

    .txt2 { 
       
        color: #ffffff;
    }

    .cardline {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: bold;

        .line {
            width: 50%;
            border-bottom: 0.01px solid #7e93a8;
            margin: 3rem 1rem 3rem;
        }


    }
}

@media screen and (min-width:1024px) {
    
    .card {
        display: flex;
        flex-direction: row;
        width: 50rem;
        .paycard {
            margin-left: 2rem;
        }
    }
}

.tip {
    display: flex;
    flex-direction: row;
    margin: 15px 0 15px;

    .tick {
        height: 8%;
        width: 8%;

    }

    .txt3 {
        font-size: 14px;
        margin-left: 1rem;
    }

}

.paycard {
    display: flex;
    flex-direction: column;
    border: 1px solid white;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    padding: 2.5rem;

    .txt4 {
        font-weight: bold;
        font-size: 15px;
        color: #ffffff;
    }

    .txt5 {
        font-weight: bold;
        font-size: 40px;
        color: #ffffff;
        margin: 3rem 0;
    }

    .button {
        cursor: pointer;
        display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
        border-radius: 20px;
        width: 10rem;
        height: 2.5rem;
        color: #ffffff;
        background-color: #61707e;
    }
}
</style>